<template>
  <!--面包屑导航-->
  <el-row style="margin: 5px 5px;">
    <el-col :span="24">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>主数据</el-breadcrumb-item>
        <el-breadcrumb-item>车间设置</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>

  <!--查询条件区-->
  <el-row>
    <el-col :span="24">
      <el-form :model="searchWorkshop" inline>
        <el-form-item label="单位编码">
          <el-input v-model="searchWorkshop.workshopCode" placeholder="请输入单位编码" />
        </el-form-item>
        <el-form-item label="单位名称">
          <el-input v-model="searchWorkshop.workshopName" placeholder="请输入单位名称" />
        </el-form-item>
        <el-form-item>
          <el-button @click="fetchWorkshopList(searchWorkshop)" type="primary">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>

  <!--按钮功能区-->
  <el-row style="margin: 5px 5px;">
    <el-col :span="24">
      <el-button-group>
        <el-button @click="insert" type="primary">
          新增
        </el-button>
      </el-button-group>
    </el-col>
  </el-row>

  <el-row>
    <el-col :span="24">
      <el-table :data="pagedData" border stripe style="width: 100%"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="workshopCode" label="车间编码" width="150"></el-table-column>
        <el-table-column prop="workshopName" label="车间名称" width="150"></el-table-column>
        <el-table-column prop="area" label="面积" width="150"></el-table-column>
        <el-table-column prop="charge" label="负责人" width="150"></el-table-column>
        <el-table-column prop="enableFlag" label="是否启用" width="120">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.enableFlag == 'Y'">是</el-tag>
            <el-tag type="danger" v-else-if="scope.row.enableFlag == 'N'">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="150"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" @click="handleEdit(scope.row.workshopId)">修改</el-button>
            <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-pagination
          style="margin-top: 20px"
          background
          layout="prev, pager, next, total"
          :total="total"
          :page-size="pageSize"
          @current-change="handlePageChange"
      />
    </el-col>
  </el-row>

  <el-dialog title="修改车间信息" v-model="dialogWorkshopEditVisiable">
    <el-form :model="workshopEditForm" label-width="80px" >
      <el-form-item label="车间编码">
        <el-input v-model="workshopEditForm.workshopCode"></el-input>
      </el-form-item>
      <el-form-item label="车间名称">
        <el-input v-model="workshopEditForm.workshopName" placeholder="请输入车间名称" />
      </el-form-item>
      <el-form-item label="负责人">
        <el-input v-model="workshopEditForm.charge" placeholder="负责人" />
      </el-form-item>
    <el-form-item label="面积">
      <el-input-number v-model="workshopEditForm.area" placeholder="面积"></el-input-number>
    </el-form-item>
    <el-form-item label="是否启用">
        <el-radio-group v-model="workshopEditForm.enableFlag">
          <el-radio :value = "'Y'" label="是"/>
          <el-radio :value = "'N'" label="否"/>
        </el-radio-group>
    </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="workshopEditForm.remark" placeholder="备注" />
      </el-form-item>

      <el-footer type="center">
        <el-button @click="dialogWorkshopEditVisiable = false">取消</el-button>
        <el-button type="primary" @click="handleWorkshopEdit(workshopEditForm)">确定</el-button>
      </el-footer>
    </el-form>
  </el-dialog>

  <el-dialog title="新增车间信息" v-model="dialogWorkshopAddVisiable">
    <el-form :model="workshopAddForm" label-width="80px" >
      <el-form-item label="车间编码">
        <el-input v-model="workshopAddForm.workshopCode"></el-input>
      </el-form-item>
      <el-form-item label="车间名称">
        <el-input v-model="workshopAddForm.workshopName" placeholder="请输入车间名称" />
      </el-form-item>
      <el-form-item label="负责人">
        <el-input v-model="workshopAddForm.charge" placeholder="负责人" />
      </el-form-item>
      <el-form-item label="面积">
        <el-input-number v-model="workshopAddForm.area" placeholder="面积"></el-input-number>
      </el-form-item>
      <el-form-item label="是否启用">
        <el-radio-group v-model="workshopAddForm.enableFlag">
          <el-radio :value = "'Y'" label="是"/>
          <el-radio :value = "'N'" label="否"/>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="workshopAddForm.remark" placeholder="备注" />
      </el-form-item>

      <el-footer type="center">
        <el-button @click="dialogWorkshopEditVisiable = false">取消</el-button>
        <el-button type="primary" @click="handleWorkshopAdd(workshopAddForm)">确定</el-button>
      </el-footer>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import workshopRequest from "@/api/md/workshop/workshop.js";
import {fetchWorkshopList, resetSearch, searchWorkshop,handlePageChange, pagedData, pageSize, total} from "@/api/md/workshop/workshopLogic.js";
import {ElMessage, ElMessageBox} from "element-plus";

const dialogWorkshopAddVisiable = ref(false);
const dialogWorkshopEditVisiable = ref(false);
const workshopEditForm = ref({
  workshopId: '',
  workshopCode: '',
  workshopName: '',
  charge: '',
  area: 0,
  enableFlag: 'N',
  remark: '',
  workshopStatus: '',
});
const workshopAddForm = ref({
  workshopId: '',
  workshopCode: '',
  workshopName: '',
  charge: '',
  area: 0,
  enableFlag: 'N',
  remark: '',
  workshopStatus: 1,
});
function handleWorkshopAdd(workshopAddForm){
  console.log(workshopAddForm)
  workshopRequest.insertWorkshop(workshopAddForm,(data)=>{
    console.log(workshopAddForm)
    if (data.msg == "OK"){
      ElMessage({
        type: "success",
        message: "添加成功",
        //重新加载数据
      })
      fetchWorkshopList(searchWorkshop)

      dialogWorkshopAddVisiable.value = false
    }
  })
}
function insert(){
  dialogWorkshopAddVisiable.value = true;
}
function handleWorkshopEdit(workshopEditForm){
  workshopRequest.updateWorkshop(workshopEditForm, (data) => {
    console.log(workshopEditForm)
    if (data.msg == "OK"){
      ElMessage({
        type: "success",
        message: "修改成功",
        //重新加载数据
      })
      fetchWorkshopList(searchWorkshop)

      dialogWorkshopEditVisiable.value = false
    }
  })
}

function handleEdit(row){ //点击编辑后提交请求并显示编辑弹窗
  workshopRequest.loadWorkshopById(row, (data)=>{
    workshopEditForm.value = data.data
    console.log(workshopEditForm.value)
    dialogWorkshopEditVisiable.value = true
  })
}
function handleDelete(row){ //删除事件
  //点击后弹出提示框
  ElMessageBox.confirm('确定要删除该记录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 用户点击了确定按钮，执行删除操作
    workshopRequest.deleteWorkshopList(row.workshopId, (data) => {
      console.log(data)
      if (data.msg == "OK"){
        ElMessage({
          type: "success",
          message: "删除成功"
          })
      }
    })
  })

}


onMounted(() => {
  fetchWorkshopList(searchWorkshop.value);  // 页面加载时获取数据

});
</script>